<template>
  <div class="dispatch-mds-manage">
    <div class="content-title">
      <div class="title">
        <span>节点管理</span>
      </div>
      <div class="icon" @click="closeDispatch">
        <span>X</span>
      </div>
    </div>
    <div class="content-main">
      <div class="main-top">
        <div class="search-box">
          <div class="input-box">
            <span>节点IP：</span>
            <el-input v-model="modelName" placeholder="请输入"></el-input>
          </div>
          <div class="btn-box">
            <!-- <div class="search-btn">
              <span>查看</span>
            </div> -->
            <el-button type="primary">查看</el-button>
            <el-button type="primary" @click="addNode">+新增节点</el-button>
            <!-- <div class="add-btn" >
              <span>+新增节点</span>
            </div> -->
          </div>
        </div>
        <div class="table-box">
          <el-table
            border
            :data="state.tableData"
            size="small"
            highlight-current-row
            @current-change="handleChangescheme"
          >
            <el-table-column width="40">
              <template #default="scope">
                <el-radio v-model="state.schemeRadio" :label="scope.row"><i /></el-radio>
              </template>
            </el-table-column>

            <el-table-column prop="nodeIp" label="节点IP" align="center" show-overflow-tooltip />
            <el-table-column prop="cpu" label="CPU" align="center" show-overflow-tooltip />
            <el-table-column prop="memory" label="内存" align="center" show-overflow-tooltip />
            <el-table-column prop="disk" label="硬盘" align="center" show-overflow-tooltip />
            <el-table-column prop="gpu" label="GPU" align="center" show-overflow-tooltip />
            <el-table-column prop="system" label="操作系统" align="center" show-overflow-tooltip />
            <!-- <el-table-column prop="currentState" label="用途" align="center" show-overflow-tooltip /> -->
            <el-table-column label="操作" align="center" fixed="right" width="200px">
              <template #default="{ row }">
                <el-button size="mini" style="color: blue" type="text" @click="editNode(row)"
                  >修改</el-button
                >
                <el-button size="mini" style="color: red" type="text">删除 </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagi-nation
            :pageSize="page.pageSize"
            :pageTotal="page.total"
            @pageFunc="pageFunc"
            class="page"
          >
          </pagi-nation>
        </div>
      </div>
      <div class="main-line"></div>
      <div class="main-down">
        <div class="down-title"><span>节点详情-</span><span>10.37.3.153服务节点</span></div>
        <div class="down-main">
          <div class="base-info-title">
            <span>基本信息</span>
            <div class="btn" v-show="showInput" @click="saveNode">
              <span>保存</span>
            </div>
          </div>
          <div class="node-ip">
            <span>节点IP:</span> <span v-if="!showInput">10.37.3.152</span>
            <el-input v-else v-model="state.form.nodeIp" placeholder="请输入"></el-input>
          </div>
          <el-row>
            <div class="node-ip">
              <span>CPU:</span> <span v-if="!showInput">2*5GHz</span>
              <el-input v-else v-model="state.form.cpu" placeholder="请输入"></el-input>
            </div>
            <div class="node-ip">
              <span>内存</span> <span v-if="!showInput">128G</span>
              <el-input v-else v-model="state.form.memory" placeholder="请输入"></el-input>
            </div>
            <div class="node-ip">
              <span>硬盘</span> <span v-if="!showInput">1P</span>
              <el-input v-else v-model="state.form.disk" placeholder="请输入"></el-input>
            </div>
          </el-row>
          <el-row>
            <div class="node-ip">
              <span>GPU</span> <span v-if="!showInput">2*6GHz</span>
              <el-input v-else v-model="state.form.gpu" placeholder="请输入"></el-input>
            </div>
            <div class="node-ip">
              <span>操作系统</span> <span v-if="!showInput">Windowsserve2001</span>
              <el-input v-else v-model="state.form.system" placeholder="请输入"></el-input>
            </div>
          </el-row>
          <!-- <div class="base-info-title">
            <span>计算单元资源</span>
          </div>
          <div class="main-item">
            <div class="item-title">
              <div class="title-icon">
                <img src="@/assets/images/dispatch/u39.png" />
              </div>
              <div class="title-name">
                <span>计算组：</span>
              </div>
              <div class="title-word">
                <span>计算组1</span>
              </div>
              <div class="title">
                <span>新安江</span>
              </div>

            </div>
            <div class="item-detail">
              <div class="ul-box">
                <div class="li-box">
                  <div class="li-item">
                    <div class="li-icon">
                      <img src="@/assets/images/dispatch/u40.png" />
                    </div>
                    <div class="li-name">
                      <span>预报断面1</span>
                    </div>
                  </div>

                </div>
                <div class="li-box">
                  <div class="li-item">
                    <div class="li-icon">
                      <img src="@/assets/images/dispatch/u40.png" />
                    </div>
                    <div class="li-name">
                      <span>预报断面2</span>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
          <div class="main-item">
            <div class="item-title">
              <div class="title-icon">
                <img src="@/assets/images/dispatch/u39.png" />
              </div>
              <div class="title-name">
                <span>计算组：</span>
              </div>
              <div class="title-word">
                <span>计算组1</span>
              </div>
              <div class="title">
                <span>时空变源</span>
              </div>

            </div>
            <div class="item-detail">
              <div class="ul-box">
                <div class="li-box">
                  <div class="li-item">
                    <div class="li-icon">
                      <img src="@/assets/images/dispatch/u40.png" />
                    </div>
                    <div class="li-name">
                      <span>预报断面1</span>
                    </div>
                  </div>

                </div>
                <div class="li-box">
                  <div class="li-item">
                    <div class="li-icon">
                      <img src="@/assets/images/dispatch/u40.png" />
                    </div>
                    <div class="li-name">
                      <span>预报断面2</span>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import emitter from '@/utils/bus'
import pagiNation from '@/components/app-pagination/pagination.vue'
import { ref, reactive, onMounted } from 'vue'
onMounted(() => {
  handleChangescheme(state.tableData[0])
})
const value = ref('')
const showInput = ref(false)
const defaultTime = reactive([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)])
const state = reactive({
  form: {},
  currentTabs: 0,
  schemeRadio: '',
  tabsArr: [
    {
      name: '基本信息'
    },
    {
      name: '计算结果'
    },
    {
      name: '综合评定结果'
    }
  ],
  tableData: [
    {
      nodeIp: '10.37.3.152',
      cpu: '2*5GHz',
      memory: '128G',
      disk: '1P',
      gpu: '2*6GHz',
      system: 'Windowsserve2001'
    }
  ]
})
// const form = reactive({})
const page = reactive({
  pageNum: 1, //当前页
  pageSize: 10, //每页条目数
  total: 1 // 记录总数
})
const closeDispatch = () => {
  emitter.emit('closePage', true)
}
const switchTabs = (index) => {
  state.currentTabs = index
}
const handleChangescheme = (item) => {
  if (item) {
    state.schemeRadio = item
  }
}
//新增节点
function addNode() {
  showInput.value = true
}
function saveNode() {
  showInput.value = false
}
function editNode(row) {
  showInput.value = true
  state.form = row
}
</script>
<style lang="less" scoped>
.dispatch-mds-manage {
  width: 800px;
  height: 100%;
  box-sizing: border-box;
  height: calc(100% - 15px);
  border-radius: 10px;
  position: absolute;
  border: 1px solid #eee;
  right: 10px;
  top: 10px;
  background: #f5f9fc;
  .content-title {
    display: flex;
    justify-content: space-between;
    margin-left: 15px;
    margin-right: 15px;
    box-sizing: border-box;
    height: 45px;
    border-bottom: 1px solid var(--fold-border-color);
    line-height: 45px;
    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        color: black;
        font-size: var(--header-fontsize);
      }
    }
    .icon {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      span {
        color: gray;
      }
    }
  }
  .content-main {
    height: calc(100% - 60px);
    .main-top {
      height: calc(100% - 550px);
      .search-box {
        height: 40px;
        display: flex;
        justify-content: space-between;
        margin: 15px 0 0 30px;
        .input-box {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
          span {
            color: #797979;
            margin-right: 5px;
            font-size: 14px;
          }
          .el-input {
            width: 200px;
          }
        }
        .time-box {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
          span {
            color: #797979;
            margin-right: 5px;
            font-size: 12px;
          }
          :deep(.el-range-editor.el-input__wrapper) {
            width: 200px;
          }
        }
        .btn-box {
          margin-right: 40px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .search-btn {
            width: 80px;
            height: 25px;
            border-radius: 8px;
            background: #149bd5;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            span {
              color: white;
              font-size: 12px;
            }
          }
          .add-btn {
            width: 100px;
            height: 25px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #0154db;
            margin-left: 20px;
            span {
              color: white;
              font-size: 12px;
            }
          }
        }
      }
      .table-box {
        height: calc(100% - 40px);
        margin-top: 15px;
        padding: 0 10px;
        background: white;
        :deep(.el-table) {
          height: calc(100% - 50px);
        }
        .page {
          margin-top: 10px;
          display: flex;
          justify-content: flex-end;
        }
      }
    }
    // .main-line {
    //   height: 1px;
    //   background: #eee;
    //   width: 90%;
    //   margin: 0 5%;
    //   margin-top: 5px;
    // }
    .main-down {
      height: 500px;
      padding: 10px;
      .down-title {
        height: 35px;
        font-size: var(--content-fontsize);
        display: flex;
        align-items: center;
        margin: 10px 0 0 10px;
        span:nth-of-type(1) {
          color: #0154db;
        }
        span:nth-of-type(2) {
          color: black;
        }
      }
      .down-main {
        margin-left: 25px;
        :deep(.el-input) {
          width: 150px;
        }
        .base-info-title {
          display: flex;
          margin: 20px 0;
          position: relative;
          span {
            // font-weight: 600;
            font-size: var(--content-fontsize);
          }
          .btn {
            position: absolute;
            right: 50px;
            width: 80px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: cornflowerblue;
            border-radius: 10px;
            cursor: pointer;
            span {
              color: white;
            }
          }
        }
        .node-ip {
          height: 50px;
          margin-right: 50px;
          display: flex;
          align-items: center;
          span:nth-of-type(1) {
            color: #797979;
            margin-right: 20px;
            font-size: 14px;
          }
        }
        .main-item {
          margin-top: 5px;
          .item-title {
            display: flex;
            .title-icon {
              margin-right: 2px;
              margin-left: 20px;
              img {
                width: 20px;
                height: 20px;
              }
            }
            .title-name {
              margin-right: 15px;
              span {
                color: #797979;
                font-size: 12px;
              }
            }
            .progress-box {
              width: 150px;
              margin-left: 50px;
            }
            .title-word {
              margin-right: 15px;
              span {
                color: #0054db;
                font-size: 12px;
              }
            }
            .title {
              span {
                color: black;
                font-size: 12px;
              }
            }
          }
          .item-detail {
            height: 100%;
            .ul-box {
              // overflow-y: auto;
              .li-box {
                display: flex;
                justify-content: space-between;
                margin: 15px 0 0 50px;
                .li-item {
                  display: flex;
                  font-size: 12px;
                  .li-icon {
                    margin-right: 5px;
                    img {
                      width: 20px;
                      height: 20px;
                    }
                  }
                  .li-name {
                    span {
                      color: black;
                    }
                  }
                }
                .li-status {
                  display: flex;
                  margin-right: 100px;
                  .status-icon {
                    margin-right: 5px;
                    img {
                      width: 20px;
                      height: 20px;
                    }
                  }
                  .status-name {
                    span {
                      color: black;
                      font-size: 12px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
